<?php
/**
 * 时间戳
 */
$this->title = 'My Yii Application';
$css = <<<CSS

select{width: 9rem !important;}
CSS;

$this->registerCss($css);

$js = <<<JS
var isPause=false;
window.setInterval(function(){
    if (isPause){return;}
    var stamp=Math.round(new Date() / 1000);
    document.querySelector('#now').innerHTML=stamp;
},1000);

$('#pause').click(function(){
    isPause=!isPause;
    if (isPause){
        $('#pause').html('继续');
    }else{
        $('#pause').html('暂停');
    }
})

//获取时间戳
Math.round(new Date() / 1000);

//时间戳转YYYY-mm-dd HH:ii:ss格式
function timestamp2datetime(timestamp) {
  var date = new Date(timestamp);
  var YY = date.getFullYear() + '-';
  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
  return YY + MM + DD +" "+hh + mm + ss;
}
//YYYY-mm-dd HH:ii:ss转时间戳
function datetime2timestamp(datetime) {
  var date=new Date(datetime);
  return date.getTime()/1000;
}



    $('#js_convert_timestamp').on('click', function (e) {
		e.preventDefault();
		var timestamp = $('#js_timestamp').val();
		timestamp = timestamp.replace(/^\s+|\s+$/, '');
		if (!/^-?\d+$/.test(timestamp)) {
			alert("时间戳格式不正确");
			return;
		}
		timestamp *= 1;
		if ($('#js_timestamp_unit').val() === 's') {
			timestamp *= 1000;
		}
		var YmdHis = timestamp2datetime(timestamp)
		$('#js_datetime').val(YmdHis);
	});

	$('#js_convert_datetime').on('click', function (e) {
		e.preventDefault();
		var time = $('#js_datetime_o').val().trim();
		
		var timestamp=datetime2timestamp(time);
		
		if ($('#js_timestamp_unit_o').val() === 'ms') {
			$('#js_timestamp_o').val(timestamp*1000 );
		} else {
			$('#js_timestamp_o').val(timestamp);
		}
	});
JS;
$this->registerJs($js);
?>

<div class="site-index">
    <div class="body-content">
        <h3>unix时间戳</div>
    <hr/>
    <span class="col-lg-12">
            <div class="form-group">
                    <span>
                        <label>现在是：</label><span id="now"></span>
                        &nbsp;&nbsp;<a id="pause">暂停</a>
                    </span>
            </div>
        <div class="form-group  form-inline">
            <label class="form_left hidden">时间戳</label>
            <input type="text" class="form-control form-control-sm" id="js_timestamp" name="timestamp" placeholder="时间戳">
            <select id="js_timestamp_unit" name="timestamp_unit" class="form-control sm">
                <option value="s">秒(s)</option>
                <option value="ms">毫秒(ms)</option>
            </select>
            <button id="js_convert_timestamp" type="button" class="btn btn-success">转换 &gt;&gt; <i
                        class="fas fa-angle-double-right"></i></button>
            <input type="text" class="form-control form-control-sm" id="js_datetime" name="datetime" placeholder="北京时间" readonly />
        </div>


        <div class="form-group  form-inline">
            <label class="form_left hidden">时间</label>
            <input type="text" class="form-control form-control-sm" id="js_datetime_o" name="datetime_o" placeholder="北京时间">

            <button id="js_convert_datetime" type="button" class="btn btn-danger">转换 &gt;&gt; <i
                        class="fas fa-angle-double-right"></i></button>
            <input type="text" class="form-control form-control-sm" id="js_timestamp_o" name="timestamp_o"  placeholder="时间戳" readonly />
            <select id="js_timestamp_unit_o" name="timestamp_unit_o" class="form-control ">
                <option value="s">秒(s)</option>
                <option value="ms">毫秒(ms)</option>
            </select>
        </div>
    </span>

    <div class="help-block">
        unix时间戳是从1970年1月1日（UTC/GMT的午夜）开始所经过的秒数，不考虑闰秒。<br />
        一个小时表示为UNIX时间戳格式为：3600秒；一天表示为UNIX时间戳为86400秒，闰秒不计算。
    </div>

    <div>js获取时间戳 </div>
    <code><pre>
//获取时间戳
Math.round(new Date() / 1000);

//时间戳转YYYY-mm-dd HH:ii:ss格式
function timestamp2datetime(timestamp) {
  var date = new Date(timestamp);
  var YY = date.getFullYear() + '-';
  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
  return YY + MM + DD +" "+hh + mm + ss;
}

//YYYY-mm-dd HH:ii:ss转时间戳
function datetime2timestamp(datetime) {
  var date=new Date(datetime);
  return date.getTime()/1000;
}
        </pre>
    </code>

</div>



